<template>
  <table
    class="abbr-table unresizable"
    data-type="abbreviation"
    width="99%"
    contenteditable="false"
    :data-block-id="blockData.blockId"
    :border="isAbbrDoc ? 1 : 0"
    v-if="abbrData.length"
  >
    <thead>
      <tr>
        <th v-if="isAbbrDoc">序号</th>
        <th>缩略语</th>
        <th>英文全称</th>
        <th>中文释义</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) of abbrData" :key="item.dataId" :data-id="item.dataId">
        <td v-if="isAbbrDoc">{{ index + 1 }}</td>
        <td>{{ item.nameShort }}</td>
        <td>{{ item.nameEn }}</td>
        <td>{{ item.description }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    blockData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    isAbbrDoc() {
      return this.$store.getters.isAbbrDoc
    },
    abbrData() {
      return this.blockData?.abbrData || []
    }
  }
}
</script>
